<template>
	<view class="cell-item" @click="$emit('click')" :style="{'height':height+'rpx'}">
		<view class="cell-title" :class="{'strong':strong}" :style="{'color':titleColor,'font-size':titleFontsize}" @click="$emit('clickTitle')">
		{{title}}<u-icon name="arrow-down" :size="titleFontsize-6" style="margin-left: 4rpx;" v-if="isShowTitleArrow"/>
		</view>
		<view class="cell-right" v-if="$slots['cell-right']">
			<slot name="cell-right"></slot>
		</view>
		<view class="cell-right" v-else @click="$emit('clickLabel')">
			<view class="cell-label">
				{{label}}
			</view>
			<view class="cell-icon" v-if="isShowArrow">
				<u-icon name="arrow-right" size="28" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		props: {
			title: {
				type: String,
			},
			titleColor: {
				type: String,
				default: '#999999'
			},
			label: {
				type: String,
			},
			strong: {
				type: Boolean,
				default: false
			},
			titleFontsize: {
				type: Number,
				default: 28,
			},
			height: {
				type: Number || String,
				default: 104,
			},
			isShowArrow:{
				type:Boolean,
				default:true,
			},
			isShowTitleArrow:{
				type:Boolean,
				default:false,
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "./cellItem.scss"
</style>
